<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['update:visible'])

const _visible = computed({
  get() {
    return props.visible
  },
  set(val) {
    emit('update:visible', val)
  },
})

function closePopup() {
  _visible.value = false
  emit('update:visible', false)
}
</script>

<template>
  <wd-popup
    v-model="_visible"
    v-bind="$attrs"
    custom-style="border-radius: 24rpx 24rpx 0 0;"
    position="bottom"
    safe-area-inset-bottom
  >
    <slot v-if="$slots.header" name="header" />
    <template v-else>
      <view v-if="title" class="popup-header">
        <view class="popup-header-left">
          <slot name="headerLeft" />
        </view>
        <view class="popup-header-title">
          {{ title }}
        </view>
        <view class="popup-header-right">
          <slot name="headerRight" />
        </view>
      </view>
    </template>
    <slot />
    <view v-if="showFooter" class="popup-footer">
      <slot name="footer">
        <text @click="closePopup">关闭</text>
      </slot>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.popup-header {
  position: relative;
  height: 100rpx;
  padding: 0 40rpx;

  &-left {
    position: absolute;
    top: 50%;
    left: 40rpx;
    transform: translateY(-50%);
  }

  &-title {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30rpx;
    font-weight: 500;
    color: $uni-text-color;
    transform: translate(-50%, -50%);
  }

  &-right {
    position: absolute;
    top: 50%;
    right: 40rpx;
    transform: translateY(-50%);
  }
}

.popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: $uni-text-color;
  border-top: 1rpx solid $uni-border-color;
}
</style>
